<template>
    <div>
      <el-button @click="click">获取天气</el-button>
      <el-button @click="click1">获取id</el-button>
      <input type="text" v-model="id" @keyup.enter="click">
      <el-button @click="click2">获取天气2</el-button>
      <div v-for="(item, index) in list" :key="index">
        预报日期：{{ item.fxDate }}
        相对湿度：{{ item.humidity }}%
        日出时间：{{ item.sunrise }}
        日落时间：{{ item.sunset }}
        当天最高气温：{{ item.tempMax }}℃
        当天最低气温：{{ item.tempMin }}℃
        白天天气状况：{{ item.textDay }}
        夜晚天气状况：{{ item.textNight }}
        白天风向：{{ item.windDirDay }}
        <!-- 白天风力等级：{{ item.windScaleDay }} -->
        夜晚风向：{{ item.windDirNight }}
        <!-- 夜晚风力等级：{{ item.windScaleNight }} -->
      </div>
      <el-cascader
          placeholder="请选择地区"
        size="default"
        :options="regionData"
        v-model="selectedOptions"
        @change="handleChange"
        >
      </el-cascader>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue'
  import axios from 'axios'
  import { regionData } from 'element-china-area-data'
  
  const list = ref(null)
  const id = ref()
  const selectedOptions = ref()
  const city = ref()
  const handleChange = (value) => {
    console.log(value);
  }
  // ?location=101120807&key=9b7669a85ca24e5cbc18fc2f5b843049
  function click(city) {
    axios.get('/v7/weather/3d', {
      params: {
        location: city,
        // 116.41,39.92
        key: '9b7669a85ca24e5cbc18fc2f5b843049'
      }
    })
      .then((res) => {
        console.log(res);
        list.value = res.data.daily
        console.log(list);
      })
  }
  // ?key=9b7669a85ca24e5cbc18fc2f5b843049&location=daiyue&adm=taian'
  function click1() {
    axios.get('https://geoapi.qweather.com/v2/city/lookup',{
      params:{
        key:'9b7669a85ca24e5cbc18fc2f5b843049',
        location:selectedOptions.value[2]
      }
    })
      .then((res) => {
        // console.log(res1);
        // console.log(city.value);
        click(res.data.location[0].id)
      })
  }
  function click2() {
    console.log(selectedOptions.value[2]);
  }
  </script>
  <style lang="sass">
  </style>
  